<template>
  <div>
    <van-search
      v-model="search"
      class="my-nav"
      placeholder="请输入快检产品名称"
      show-action
      @search="onSearch"
      @cancel="onCancel"
    >
      <img
        slot="action"
        class="filter"
        src="@/assets/img/icon/icon_filter.png"
        alt=""
        @click="onFilter"
      />
    </van-search>

    <div class="page_space">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <base-card-with-input
          v-for="(item, index) in list"
          :key="index"
          v-model="item.stockNum"
          class="mt-15"
          :title="item.title"
          :data="item.data"
          label="本次使用数量"
          tip="请输入使用数量"
          :showInput="item.checked"
        >
          <template #header>
            <div @click.stop>
              <van-checkbox
                v-model="item.checked"
                checked-color="#2163E0"
                shape="square"
                class="mr-10"
                @change="pitchThis($event, item)"
              ></van-checkbox>
            </div>
          </template>
        </base-card-with-input>
      </van-list>
    </div>

    <div class="btn_wrap">
      <button class="btn middle default" @click="cancelProduct">取消</button>
      <button class="btn middle" @click="submit">确认</button>
    </div>
  </div>
</template>

<script>
import baseCardWithInput from '@/components/base-card/with-input.vue'
import { getPerson, enableOrDisableOfBatch } from '@/api/person'
import { getProduct } from '@/api/detection'
import ItemTime from '@/components/input-card/item-time.vue'
export default {
  name: 'managePerson',
  components: { baseCardWithInput },
  data() {
    return {
      search: '',
      checked: true,
      loading: false,
      finished: false, // 触底加载结束
      params: {
        limit: 10,
        page: 1,
        businessVarietyName: '',
        areaCode: '440902001000',
        managementEntId: '2310101028504090000'
      },
      list: [],
      productList: [],
      INDEX: ''
    }
  },
  created() {
    this.INDEX = this.$route.query.index
  },
  methods: {
    // 筛选
    onFilter() {
      // 如果先前已筛选，则重置
      if (
        this.params.subjectType ||
        this.params.managementEntNameAndShortName
      ) {
        this.params.subjectType = ''
        this.params.subjectTypeName = ''
        this.params.managementEntNameAndShortName = ''
        this.getInspectList(this.params, true)
      } else {
        this.$router.push('/')
      }
    },
    // 删除
    async submit() {
      console.log(this.productList)
      let strList = []
      this.productList.forEach((item) => {
        // 检查输入情况
        if (!item.stockNum) {
          this.$toast('请输入使用数量！')
          return false
        }
        let str =
          item.businessVarietyName +
          '/' +
          item.inventoryBatch +
          '/' +
          item.stockNum +
          item.unitName
        strList.push(str)
      })
      let info = {
        dataSource: 'fastCheckProduct', // 固定
        businessVarietyInfoId: '',
        businessVarietyName: strList.join('、'), // 快检产品信息
        fastCheckStorageDetailId: '',
        ioStockInfoDTOList: this.productList
      }
      console.log('info:', info)
    },
    // 取消选中
    cancelProduct() {
      this.productList = []
      this.list.forEach((item) => {
        item.checked = false
      })
    },
    // 选中人员
    pitchThis(e, obj) {
      let exit = this.productList.findIndex((item) => item === obj.id)
      if (e) {
        // true
        this.productList.push(obj)
      } else {
        if (exit !== -1) this.productList.splice(exit, 1)
      }
    },
    onSearch(val) {
      this.search = val.trim()
      this.params.name = this.search
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    onCancel() {
      this.search = ''
      this.params.name = ''
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    // 触底加载
    onLoad() {
      this.getList(this.params)
    },
    // 列表
    async getList(params) {
      const res = await getProduct(params)
      if (res.code === '0') {
        res.data.content.forEach((item) => {
          this.list.push({
            title: item.businessVarietyInfoDTO.name,
            id: item.id,
            checked: false,
            placeId: item.placeId,
            placeName: item.placeName,
            oldStockNum: item.stockNum,
            inventoryBatch: item.inventoryBatch,
            businessVarietyId: item.businessVarietyId,
            businessVarietyName: item.businessVarietyInfoDTO.name,
            batch: item.batch,
            inStockDate: item.inStockDate,
            stockNum: '',
            unitName: item.inStockDetailInfoDTO.varietyPackUnitDTO.unitName,
            data: [
              {
                key: '生产厂家/品牌',
                value: item.businessVarietyInfoDTO.brand
              },
              {
                key: '所属区划/快检点',
                value: item.placeName
              },
              {
                key: '生产批次',
                value: item.batch
              },
              {
                key: '入库批次',
                value: item.inventoryBatch
              },
              {
                key: '可用库存',
                value: item.stockNum
              },
              {
                key: '单位',
                value: item.inStockDetailInfoDTO.varietyPackUnitDTO.unitName
              }
            ]
          })
        })
        console.log(this.list)
        // 加载状态结束
        this.loading = false
        this.params.page++
        // 数据全部加载完成
        if (res.data.last) {
          this.finished = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filter {
  width: 20px;
  height: 20px;
}
.my-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}
.btn_wrap {
  .tip {
    font-family: PingFang SC Medium;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    /* 粤商通/常规黑色 */
    color: #171819;
    .count {
      /* 粤商通/常规蓝色 */
      color: #2163e0;
      margin-left: 5px;
    }
    .all {
      color: #b2b8bd;
      margin-top: 6px;
    }
  }
}
</style>
